<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>File System Browser</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .tree ul {
            padding-left: 20px;
            list-style: none;
        }
        .folder {
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="file-tree">
    <ul>
        <li class="folder" data-path="">/</li>
    </ul>
</div>

<script>
    $(document).ready(function () {
        function loadFiles(path, element) {
            $.get("/api/filesystem/list", {folder: path}, function (data) {
                const ul = $("<ul>");
                data.forEach(item => {
                    const li = $("<li>").addClass(item.isDirectory ? "folder" : "file").text(item.name);
                    if (item.isDirectory) {
                        li.data("path", FilenameUtils.concat(path, item.name));
                        li.click(function () {
                            loadFiles($(this).data("path"), ul);
                        });
                    }
                    ul.append(li);
                });
                element.empty().append(ul);
            });
        }

        $("#file-tree .folder").click(function () {
            const path = $(this).data("path");
            loadFiles(path, $(this).children("ul"));
        });

        loadFiles("", $("#file-tree ul"));
    });
</script>
</body>
</html>